<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>角色管理</title>
    <script id="header" type="text/javascript"
            src="../js/header.js?head=../"></script>
    <script type="text/javascript" src="../js/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
    <link href="../js/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <style>
        .ztrees{
            width: 110px;
            margin-left:50%;
        }
    </style>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
    角色管理 <a class="btn btn-success radius r mr-20"
            style="line-height: 1.6em; margin-top: 3px"
            href="javascript:location.replace(location.href);" title="刷新"><i
                class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="pd-20">
    <div class="text-l">
        条件查询：<input type="text" class="input-text" id="searchLike" placeholder="请输入查询条件" style="width: 120px">
        <button onclick="searchData()" class="btn btn-secondary radius size-S">查询</button>
        <a id="importBtn" href="javascript:showImport()" class="btn btn-success size-S radius"> <i class="Hui-iconfont Hui-iconfont-upload"></i>导入</a>
        <a href="../sysRole/downloadExcel" class="btn btn-success size-S radius"><i class="Hui-iconfont Hui-iconfont-yundown"></i>导出</a>
    </div>
</div>


    <div class="cl pd-5 bg-1 bk-gray mt-10">
			<span class="l"> <a href="javascript:;"
                                onclick="javascript:add();" id="saveData"
                                class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i>新增</a>
				<a href="javascript:;" onclick="bathDelete();" id="deleteData"
                   class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i>
					批量删除</a>
			</span>
    </div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort" id="main">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="50">ID</th>
                <th width="100">角色名称</th>
                <th width="100">创建者</th>
                <th width="100">更新者</th>
                <th width="100">创建时间</th>
                <th width="100">更新时间</th>
                <th width="100">备注</th>
                <th width="140">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<div id="formShow" class="pd-20" style="display: none;">
    <form action="" method="post" class="form form-horizontal"
          id="submitForm">
        <div class="row cl">
            <input id="id" name="id" style="display: none;" /> <input
                    id="dataType" name="dataType" style="display: none;" /> <label
                    class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="" placeholder=""
                       id="roleName" name="roleName" required >
            </div>
            <label class="form-label col-xs-2 col-sm-2"><span
                        class="c-red">*</span>创建者：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="" placeholder=""
                       id="createBy" name="createBy" required>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span
                        class="c-red"></span>更新者：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="" placeholder=""
                       id="updateBy" name="updateBy">
            </div>
            <label class="form-label col-xs-2 col-sm-2"><span
                        class="c-red"></span>备注：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="input-text" value="" placeholder=""
                       id="remark" name="remark">
            </div>
        </div>
        <div class="ztrees">
            <input type="hidden" id="menuIds" name="menuIds">
            权限：
            <ul id="treeUl" class="ztree">吖吖</ul>
        </div>
        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" id="submit" type="submit"
                       value="提交">
            </div>
        </div>
    </form>
</div>
<!--上传文件框-->
<div class="pd-20" id="import" style="display: none;">
    <form class="Huiform" method="post" action="" target="_self" id="dataFrom" style="margin-top: 8%">
        <a href="/bigDateWeb/tmp/角色表模板.xlsx" class="btn btn-primary radius" style="margin-left: 20%"><i
                    class="Hui-iconfont">&#xe641;</i>下载模板</a>
        <span style="padding-left: 10px" class="btn-upload form-group">
                <input class="input-text upload-url radius size-S " type="text" name="uploadfile-2"
                       enctype="multipart/form-data"
                       id="uploadfile-2" readonly="readonly"
                       style="width:200px" placeholder="选择导入excel文件"/>
                <input type="file" multiple name="file-2" class="input-file"/>
         </span>
        <input class="btn btn-success size-S radius" type="button" value="导入" onclick="importExcel()">
    </form>
</div>
<script type="text/javascript">
    var base = "../sysRole/";
    var findAllUrl=base+"/findAllSysMenu";
    var findPage = "findSysRolePage";
    var findOne = "findSysRoleOne";
    var updateData = "updateSysRole";
    var saveData = "saveSysRole";
    var deleteData = "deleteSysRole";
    var importRoleExcel = "importRoleExcel";
    var pageUrl = base + findPage;
    var editUrl = base + findOne;
    var updateUrl = base + updateData;
    var addUrl = base + saveData;
    var importUrl=base+importRoleExcel;
    var deleteUrl = base + deleteData;
    var pageSize = 7;

    var dataTable;
    var treeObj;
    $(function() {
        dataTable = MyDataTable({
            id : "main",
            pageUrl : pageUrl,
            param : function() {
                 var p={"searchLike":$('#searchLike').val()};
                return p;
            },
            "columns" : [
                {
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        return '<td><input name="" type="checkbox" value="'+full.id+'"></td>';
                    }
                },{
                    "data" : "id",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },

                {
                    "data" : "roleName",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "createBy",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "updateBy",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "createTime",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "updateTime",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "data" : "remark",
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        if (data) {
                            return data;
                        }
                        return "";
                    }
                },
                {
                    "orderable" : false,
                    "className" : 'text-c',
                    "render" : function(data, type, full) {
                        return "<a class="
                            + updateData
                            + "  title = '修改' onclick='edit(\""
                            + full.id
                            + "\");'><i class='Hui-iconfont'>&#xe6df;</i></a>"
                            + "&#12288;<a  class="
                            + deleteData
                            + "  title = '删除' onclick='deletePlat(\""
                            + full.id
                            + "\");'><i class='Hui-iconfont'>&#xe6e2;</i></a>";
                    }
                } ]
        });

    });

    function showMask() {
        $("#mask").css("height", $(document).height());
        $("#mask").css("width", $(document).width());
        $("#mask").show();
    }

    //隐藏遮罩层
    function hideMask() {
        $("#mask").hide();
    }

    //显示导入表单
    function showImport() {
        $('#import').show();
        layer.open({
            type: 1,
            area: ['50%', '50%'], //宽高s
            content: $('#import'),
            title: "导入文件",
            zIndex: 666
        });
    }

    //导入excel
    function importExcel() {
        showMask();
        $('#dataFrom').attr("action", importUrl);
        //验证上传文件
        var filepath = $('#uploadfile-2').val();
        var start = filepath.lastIndexOf(".");
        if (start == -1) {
            layer.msg("文件为空");
            hideMask();
            return
        }
        var ext = filepath.substring(start, filepath.length).toUpperCase();
        if (ext != ".XLSX" && ext != ".XLS") {
            layer.msg("文件格式不正确");
            hideMask();
            return;
        }
        var option = {
            success: function (result) {
                console.log("result: ",result);
                hideMask();
                if (result.code === 200) {
                    dataTable.ajax.reload();
                    layer.msg("文件导入成功啦");
                } else {
                    layer.msg("导入失败");
                }
            }
        };
        $('#dataFrom').ajaxSubmit(option);
    }
    //复选框树
    var setting = {
        check:{enable:true,chkboxType:{"Y":"ps","N":"ps"}},
        data:{
            simpleData:{
                enable: true,
                idKey: "id",
                pIdKey: "pId",
            }
        },
        view:{
            showLine: true,
            nameIsHTML: true
        }
    }
    function tree(){
        //加载菜单树
        $.ajax({
            //将选择修改的记录id传到后台
            url:findAllUrl+"?roleId="+$("#id").val(),
            type:'get',
            datatype:'json',
            success:function(result){
                let code = result.code;
                if(code==200){
                    treeObj = $.fn.zTree.init($("#treeUl"), setting, result.data);
                }else{
                    layer.msg("菜单为空！");
                }
            }
        });
    };

    //获取勾选复选框的节点id
    function onCheck(e,treeId,treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("treeUl")
        var nodes = treeObj.getCheckedNodes(true)
        var idStr = '';
        for (var i = 0; i < nodes.length; i++) {
            idStr+=nodes[i].id+',';
            console.log("节点id:" + nodes[i].id); //获取选中节点的值
        }
        return idStr;
    }

    function bathDelete() {
        var ids = [];
        $("#main input:checked").each(function(i) {
            if ($(this).val() != '') {
                ids.push($(this).val());
            }
        });
        if (ids.length == 0) {
            layer.msg("至少选择一行进行操作!");
            return;
        }
        deletePlat(ids.join(","));

    };

    //Enter事件  触发
    $('#searchLike').keydown(function(){
        if(event.keyCode == 13){   //enter键值为13
            searchData()
        }
    });

    function deletePlat(ids) {
        layer.confirm('你真的要删除勾选的行?', function(index) {
            layer.load();
            layer.close(index);
            $.ajax({
                url : deleteUrl,
                type : 'get',
                datatype : 'json',
                data : {
                    "ids" : ids
                },
                success : function(result) {
                    if (result.code==200) {
                        layer.msg(result.msg);
                        searchData();
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        });
    }
    function searchData() {
        dataTable.ajax.reload(null, false);
    };

    /**
     * 清空表单信息
     */
    function clearFrom() {
        $('#submitForm')[0].reset();
    };

    /**
     * 编辑用户
     * @param id
     */
    function edit(id) {
        clearFrom();
        var form = $("#submitForm");
        //设置表单提交 地址
        form.attr("action", updateUrl);
        $.ajax({
            url : editUrl,
            type : 'get',
            datatype : 'json',
            data : {
                "id" : id
            },
            success : function(result) {
                layer.closeAll();
                $('#formShow').show();
                layer.open({
                    title : '修改',
                    type : 1,
                    area : [ '80%', '60%' ], //宽高s
                    content : $('#formShow')
                });
                //填充表单信息
                for ( var d in result) {
                    var $obj = $("#" + d);
                    if ($obj.length > 0) {
                        var tagName = $obj[0].tagName;
                        if (tagName == "IMG") {
                            $obj.attr("src", "" + result[d] + "");
                        } else {
                            $obj.val(result[d] + "");
                        }
                    }
                }
                tree();
            }
        });
    };

    /**
     * 提交表单
     */
    function submitFrom() {
        var form = $("#submitForm");
        let ids = onCheck();
        $("#menuIds").val(ids);
           layer.load();
        var options = {
            type : 'post',
            success : function(data) {
                layer.closeAll();
                if (data.code==200) {
                    searchData();
                } else {
                    layer.msg(data.msg);
                }
            }
        };
        form.ajaxSubmit(options);
    };

    $("#submitForm").validate({
        rules : {
            nickname : {
                required : true
            },
        },
        onkeyup : false,
        focusCleanup : true,
        success : "valid",
        submitHandler : function(form) {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            submitFrom();
            return;
        }
    });


    function add() {
        clearFrom();
        tree();
        var form = $("#submitForm");
        form.attr("action", addUrl);
        $('#formShow').show();
        layer.open({
            title : '添加',
            type : 1,
            area : [ '80%', '60%' ], //宽高s
            content : $('#formShow')
        });
    };

</script>
</body>
</html>